<template>
	<view>
		<view class="header-wrapper">
			<image class="topbg" src="https://youlinapi.zhihui361.com/image/wx/helpbg.png" mode=""></image>
			<view class="header-top">
				<view class="header-inner fa" :style="{paddingTop: utils.menuButtonTop(), height: utils.menuButtonHeight(), background: opacity}">
					<image class="backimg" src="../../static/back2.png" mode="" @click="utils.pageBack()"></image>
					<view class="header-title">订单详情</view>
				</view>
				<view class="header-place" :style="{paddingTop: utils.menuButtonTop(), height: utils.menuButtonHeight()}"></view>
			</view>
		</view>
		<view class="main pr">
			<view class="status-box fa jcc">
				<image class="status-icon" src="../../static/orderstate1.png" mode="" v-if="info.state == 1"></image>
				<image class="status-icon" src="../../static/orderstate2.png" mode="" v-if="info.state == 2"></image>
				<image class="status-icon" src="../../static/orderstate3.png" mode="" v-if="info.state == 3"></image>
				<view v-if="info.state == 1">等待配送员接单</view>
				<view v-if="info.state == 2">配送员送单中</view>
				<view v-if="info.state == 3">已完成</view>
				<view v-if="info.state == 4">已取消</view>
			</view>
			<view class="address-box fa">
				<image class="location-icon" src="../../static/location4.png" mode=""></image>
				<view class="flex1">
					<view class="fa">
						<view class="nickname">{{info.sendName}}</view>
						<view class="mobile">{{info.sendPhone}}</view>
					</view>
					<view class="address minor">{{info.sendEstate}}{{info.sendDetails}}</view>
				</view>
			</view>
			<view class="info-box">
				<view class="info-list flex jcsb">
					<view class="name">送达时间</view>
					<view class="red flex fww">
						<view style="margin-right: 10rpx;">{{info.day}}</view>
						<view>{{info.receivingTime}}</view>
						<view style="margin: 0 4rpx;"> ~ </view>
						<view>{{info.receivingEndTime}}</view>
					</view>
				</view>
			</view>
			<view class="info-box">
				<view class="goods-box">
					<view class="goods-list-wrapper" v-for="(item, index) in ordersItemVoList" :key="index">
						<view class="goods-list flex">
							<image class="goods-img" :src="item.mainImg" mode=""></image>
							<view class="goods-right flex1 flex fdc jcsb">
								<view>
									<view class="goods-name ell2">{{item.name}}</view>
									<view class="spec">{{item.skuName.substr(0, item.skuName.length -1)}}</view>
								</view>
								<view class="price-box fa jcsb">
									<view class="price fa">
										<view>￥</view>
										<view class="num">{{item.price}}</view>
									</view>
									<view class="minor">x{{item.num}}</view>
								</view>
							</view>
						</view>
						<view class="fa jcfe">
							<view class="comment-btn" @click="goComment(item)" v-if="info.state == 3 && item.isEvaluate == 0">评价</view>
						</view>
					</view>
				</view>
			</view>
			<view class="money-box">
				<view class="money-list fa jcsb">
					<view>商品金额</view>
					<view class="cl3">￥{{info.originMoney}}</view>
				</view>
				<view class="money-list fa jcsb">
					<view>优惠券</view>
					<view class="red">-￥{{(info.originMoney - info.money).toFixed(2)}}</view>
				</view>
				<view class="money-list fa jcfe">
					<view>实付金额：￥{{info.isPay == 1 ? info.money : 0}}</view>
				</view>
			</view>
			<view class="money-box">
				<view class="money-list fa jcsb">
					<view class="left">买家留言</view>
					<view class="right">{{info.memo || '无'}}</view>
				</view>
			</view>
			<view class="detail-box">
				<view class="detail-list flex">
					<view class="left">订单编号</view>
					<view class="right">{{info.ordersNo}}</view>
				</view>
				<!-- <view class="detail-list flex">
					<view class="left">订单类型</view>
					<view class="right">{{info.secondType == 1 ? '预约订单' : '立即送达'}}</view>
				</view> -->
				<view class="detail-list flex">
					<view class="left">下单时间</view>
					<view class="right">{{info.createTime}}</view>
				</view>
			</view>
		</view>
		<view class="fixed-bottombar" v-if="info.state == 1 || info.state == 2 || info.state == 3 || (info.state == 3 && info.isPay == 0)">
			<view class="bottombar-box fa jcfe">
				<view class="cancel-btn" @click="cancelOrder" v-if="info.state == 1">取消订单</view>
				<view class="cancel-btn" @click="phoneCall" v-if="info.state == 2">联系配送员</view>
				<view class="ack-btn" @click="commentRider" v-if="info.state == 3 && info.isEvaluate == 0">评价配送员</view>
				<view class="ack-btn" @click="payOrder(info.ordersId, info.money)" v-if="info.state == 3 && info.isPay == 0">立即支付</view>
			</view>
			<view class="fixed-place"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				opacity: 'rgba(255,255,255,0)',
				id: '',
				info: {
					sendName: '',
					sendPhone: '',
					fetchEstate: '',
					sendDetails: '',
					receivingTime: '',
					receivingEndTime: '',
					originMoney: '',
					money: '',
					memo: '',
					ordersNo: '',
					type: '',
					createTime: '',
					state: ''
				},
				ordersItemVoList: [],
				lock: true,
			};
		},
		onPageScroll(e) {
			this.opacity = 'rgba(24,201,84,' + this.utils.opacityCompute(e.scrollTop) + ')'
		},
		onLoad(options) {
			if(options.id) {
				this.id = options.id
				this.getInfo()
			}
		},
		methods: {
			// 订单详情
			getInfo() {
				this.api.orderInfoFunc({
					ordersId: this.id
				}).then(res => {
					if(res.code == 200) {
						this.info = res.data
						this.info.today = this.info.day.substr(5, 2) + '.' + this.info.day.substr(8, 2)
						this.ordersItemVoList = res.data.ordersItemVoList
					}
				})
			},
			// 去评价
			goComment(item) {
				let goods = {
					ordersId: item.ordersId,
					productId: item.productId,
					mainImg: item.mainImg,
					name: item.name,
					skuName: item.skuName,
					price: item.price,
					num: item.num
				}
				uni.redirectTo({
					url: '/pages/order/comment?goods=' + encodeURIComponent((JSON.stringify(goods)))
				})
			},
			// 取消订单
			cancelOrder() {
				uni.showModal({
					title: '提示',
					content: '是否取消订单',
					success: result => {
						if(result.confirm) {
							this.api.orderUpdateFunc({
								ordersId: this.id,
								state: 4
							}).then(res => {
								if(res.code == 200) {
									uni.showToast({
										title: '订单已取消'
									})
									setTimeout(() => {
										uni.navigateBack()
									})
								}else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
							}).catch(err => {
								uni.showToast({
									title: '操作失败',
									icon: 'none'
								})
							})
						}
					}
				})
			},
			// 支付订单
			payOrder(id, money) {
				uni.redirectTo({
					url: '/pages/order/order_pay' + '?id=' + id + '&money=' + money
				})
			},
			// 联系配送员
			phoneCall() {
				let phoneNumber = String(this.info.courier.phone)
				uni.makePhoneCall({
					phoneNumber: phoneNumber
				})
			},
			// 评价配送员
			commentRider() {
				uni.redirectTo({
					url: '/pages/order/comment_rider?id=' + this.info.courierId + '&ordersId=' + this.info.ordersId
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header-wrapper{
		.topbg{
			position: fixed;
			top: 0;
			width: 100%;
		}
		.header-inner{
			position: fixed;
			z-index: 999;
			left: 0;
			right: 0;
			padding-bottom: 16rpx;
			padding-left: 32rpx;
			padding-right: 32rpx;
			.backimg{
				width: 48rpx;
				height: 48rpx;
			}
			.header-title{
				position: absolute;
				left: 200rpx;
				right: 200rpx;
				text-align: center;
				font-size: 34rpx;
				color: #fff;
			}
		}
		.header-place{
			padding-bottom: 16rpx;
		}
	}
	.main{
		padding-bottom: 30rpx;
	}
	.status-box{
		height: 80rpx;
		font-size: 32rpx;
		color: #fff;
		.status-icon{
			margin-right: 16rpx;
			width: 44rpx;
			height: 44rpx;
		}
	}
	.address-box{
		margin: 30rpx 24rpx 0;
		padding: 30rpx 20rpx;
		border-radius: 16rpx;
		background-color: #fff;
		.location-icon{
			margin-right: 14rpx;
			width: 44rpx;
			height: 44rpx;
		}
		.nickname{
			font-size: 30rpx;
			font-weight: bold;
		}
		.mobile{
			margin-left: 26rpx;
		}
		.address{
			margin-top: 10rpx;
		}
		.rightimg{
			width: 36rpx;
			height: 36rpx;
		}
	}
	.info-box{
		margin: 20rpx 24rpx 0;
		padding: 2rpx 0 30rpx;
		border-radius: 16rpx;
		font-size: 26rpx;
		background-color: #fff;
		.info-list{
			margin: 30rpx 20rpx 0;
			.name{
				margin-right: 10rpx;
			}
			.red{
				color: #FE3134;
			}
			.right-icon{
				margin-left: 10rpx;
				width: 28rpx;
				height: 28rpx;
			}
		}
	}
	.goods-box{
		padding: 2rpx 20rpx 0;
		.goods-list{
			margin-top: 24rpx;
			.goods-img{
				margin-right: 16rpx;
				width: 180rpx;
				height: 180rpx;
				border-radius: 8rpx;
			}
			.goods-right{
				padding-bottom: 6rpx;
			}
			.goods-name{
				width: 460rpx;
			}
			.spec{
				font-size: 24rpx;
				color: #777;
				line-height: 40rpx;
			}
			.price-box{
				margin-top: 20rpx;
				.price{
					color: #FE3134;
					font-weight: bold;
					.num{
						font-size: 32rpx;
					}
				}
			}
		}
		.comment-btn{
			margin-top: 50rpx;
			padding: 0 56rpx;
			height: 64rpx;
			line-height: 64rpx;
			border: 2rpx solid var(--theme);
			border-radius: 32rpx;
			color: var(--theme);
		}
	}
	.money-box{
		margin: 22rpx 26rpx 0;
		border-radius: 20rpx;
		background-color: #fff;
		.money-list{
			padding: 30rpx 24rpx;
			border-bottom: 2rpx solid #eee;
			color: #666;
			&:last-child{
				border-bottom: none;
			}
			.red{
				font-size: 26rpx;
				font-weight: bold;
				color: #FE3134;
			}
			.left{
				width: 140rpx;
			}
			.right{
				flex: 1;
				text-align: right;
			}
		}
	}
	.detail-box{
		margin: 24rpx 24rpx 0;
		padding: 14rpx 22rpx 34rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
		color: #666;
		background-color: #fff;
		.detail-list{
			margin-top: 20rpx;
			.left{
				width: 140rpx;
			}
			.right{
				flex: 1;
			}
		}
	}
	.fixed-bottombar{
		.bottombar-box{
			position: fixed;
			z-index: 99;
			bottom: env(safe-area-inset-bottom);
			left: 0;
			right: 0;
			padding: 0 28rpx;
			height: 120rpx;
			background-color: #fff;
			.cancel-btn{
				margin-left: 20rpx;
				padding: 0 50rpx;
				height: 68rpx;
				line-height: 68rpx;
				border: 2rpx solid #aaa;
				border-radius: 34rpx;
				color: #777;
			}
			.ack-btn{
				margin-left: 20rpx;
				padding: 0 50rpx;
				height: 68rpx;
				line-height: 68rpx;
				border: 2rpx solid #18C954;
				border-radius: 34rpx;
				color: #18C954;
			}
		}
		.fixed-place{
			height: calc(120rpx + env(safe-area-inset-bottom));
		}
	}
</style>
